<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>机票查询结果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet" />

    <style>
        body {
            margin: 0;
            background: linear-gradient(135deg, #0a2342, #1e3c72);
            font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
            color: #fff;
            min-height: 100vh;
        }

        .container {
            padding-top: 2rem;
            padding-bottom: 4rem;
            max-width: 960px;
        }

        h2 {
            font-weight: bold;
            font-size: 2.2rem;
            color: #ffd54f;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
        }

        .glass-box {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            backdrop-filter: blur(8px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
            padding: 2rem;
            margin-top: 1.5rem;
            color: #fff;
        }

        /* 搜索框样式 */
        .search-form {
            background: rgba(255, 255, 255, 0.12);
            padding: 1.5rem 2rem;
            border-radius: 1.2rem;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            margin-bottom: 2rem;
        }

        .form-label {
            color: #fff;
            font-weight: 600;
        }

        .form-control {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: #fff;
            border-radius: 0.75rem;
        }

        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .form-control:focus {
            background: rgba(255, 255, 255, 0.35);
            color: #000;
            outline: none;
            box-shadow: 0 0 0 0.25rem #ffd54faa;
        }

        /* 自动补全建议框 */
        .suggest-box {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #16355d;
            max-height: 200px;
            overflow-y: auto;
            border-radius: 0 0 0.75rem 0.75rem;
            z-index: 1000;
            color: #fff;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
        }

        .suggest-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
        }

        .suggest-item:hover {
            background: #ffd54f;
            color: #0a2342;
        }

        /* 表格样式 */
        .table {
            color: #fff;
            margin-bottom: 0;
        }

        .table thead th {
            color: #ffd54f;
            font-weight: 600;
            font-size: 1rem;
            background-color: rgba(255, 255, 255, 0.12);
            border-bottom: 2px solid #ffd54f;
        }

        .table tbody tr:hover {
            background-color: rgba(255, 213, 79, 0.2);
            color: #0a2342;
        }

        .price-tag {
            font-weight: 700;
            color: #020202;
        }


        .btn-primary {
            background-color: #ffd54f;
            border: none;
            color: #0a2342;
            font-weight: 600;
            padding: 0.4rem 1.2rem;
            border-radius: 1.5rem;
            transition: background-color 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #fff176;
            color: #000;
        }

        .btn-back {
            background: transparent;
            border: 1px solid #ffd54f;
            color: #ffd54f;
            font-weight: 500;
            border-radius: 2rem;
            padding: 0.45rem 1.3rem;
            text-decoration: none;
        }

        .btn-back:hover {
            background: #ffd54f;
            color: #0a2342;
            text-decoration: none;
        }
        .page-link {
            color: #fff; /* 设置字体为白色 */
            font-weight: 600;
            background: transparent;
            border: none;
            border-radius: 2rem;
            padding: 0.3rem 0.9rem;
            font-size: 0.85rem;
            transition: all 0.25s ease-in-out;
        }


        .pagination-glass {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            border-radius: 1rem;
            padding: 0.4rem 0.8rem;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
        }


        .page-link:hover,
        .page-link:focus {
            background-color: #ffd54f;
            color: #0a2342; /* 悬浮时使用深色字体 */
            box-shadow: 0 0 10px #ffd54f, 0 0 20px #ffd54faa;
        }


        .page-item.disabled .page-link {
            opacity: 0.4;
            cursor: not-allowed;
            background: transparent;
            color: #ccc;
        }

        .current-page {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 2rem;
            color: #ffffff !important;
        }


        .neon-hover:hover {
            text-shadow: 0 0 6px #fff176, 0 0 12px #fff176aa;
        }

    </style>
</head>
<body>

<div class="container">

    <form class="search-form" th:action="@{/planeTicket/search}" method="get" autocomplete="off">
        <div class="row g-3 position-relative">
            <div class="col-md-4 position-relative">
                <label for="departureCity" class="form-label">出发城市</label>
                <input id="departureCity" name="departureCity" class="form-control" placeholder="输入城市或机场" autocomplete="off" required />
                <ul id="departureList" class="suggest-box"></ul>
            </div>
            <div class="col-md-4 position-relative">
                <label for="arrivalCity" class="form-label">目的城市</label>
                <input id="arrivalCity" name="arrivalCity" class="form-control" placeholder="输入城市或机场" autocomplete="off" required />
                <ul id="arrivalList" class="suggest-box"></ul>
            </div>
            <div class="col-md-4">
                <label for="departureDate" class="form-label">出发日期（可选）</label>
                <input type="date" id="departureDate" name="departureDate" class="form-control" />
            </div>
        </div>

        <div class="form-check form-switch mt-3 mb-3">
            <input class="form-check-input" type="checkbox" id="isRoundTrip" name="roundTrip" value="true" onchange="toggleReturnDate()" />
            <label class="form-check-label" for="isRoundTrip" style="color: #fff;">往返</label>
        </div>

        <div class="row g-3 mb-3" id="returnDateDiv" style="display:none;">
            <div class="col-md-4">
                <label for="returnDate" class="form-label">返程日期（可选）</label>
                <input type="date" id="returnDate" name="returnDate" class="form-control" />
            </div>
        </div>

        <button type="submit" class="btn btn-primary w-100"><i class="bi bi-search me-2"></i>查询航班</button>
    </form>


    <div class="d-flex justify-content-between align-items-center mt-5 mb-4">
        <h2><i class="bi bi-ticket-detailed-fill me-2"></i>航班结果列表</h2>
        <a href="/planeTicket/index" class="btn btn-back"><i class="bi bi-arrow-left me-1"></i>返回首页</a>
    </div>

    <!-- 去程航班列表 -->
    <div class="glass-box" th:if="${outboundFlights != null}">
        <h4 class="mb-3">去程航班</h4>
        <table class="table table-hover align-middle">
            <thead>
            <tr>
                <th>航班号</th>
                <th>出发城市</th>
                <th>到达城市</th>
                <th>起飞时间</th>
                <th>到达时间</th>
                <th>票价</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="flight : ${outboundFlights}">
                <td th:text="${flight.flightNo}"></td>
                <td th:text="${flight.depCity.city}"></td>
                <td th:text="${flight.arrCity.city}"></td>
                <td>
                    <span th:text="${#dates.format(flight.depDate, 'yyyy-MM-dd')}"></span>
                    &nbsp;<span th:text="${flight.depTime}"></span>
                </td>
                <td>
                    <span th:text="${#dates.format(flight.arrDate, 'yyyy-MM-dd')}"></span>
                    &nbsp;<span th:text="${flight.arrTime}"></span>
                </td>
                <td><span class="price-tag" th:text="'￥' + ${flight.basePrice}"></span></td>
                <td>
                    <a href="#" class="btn btn-sm btn-primary"
                       th:href="@{/order/success(flightId=${flight.id}, flightNo=${flight.flightNo}, basePrice=${flight.basePrice},departureCity=${departureCity},arrivalCity=${arrivalCity}, depPort=${flight.depCity.name}, arrPort=${flight.arrCity.name},departureDate=${departureDate},returnDate=${returnDate},roundTrip=${roundTrip})}">
                        购买
                    </a>

                </td>

            </tr>
            </tbody>
        </table>
        <div class="d-flex justify-content-center mt-4" th:if="${outTotalPages > 1}">
            <nav class="pagination-glass">
                <ul class="pagination pagination-sm justify-content-center">
                <li class="page-item" th:classappend="${outPage == 1} ? 'disabled'">
                        <a class="page-link neon-hover"
                           th:href="@{/planeTicket/search(departureCity=${param.departureCity},
                                                  arrivalCity=${param.arrivalCity},
                                                  departureDate=${param.departureDate},
                                                  roundTrip=${param.roundTrip},
                                                  outPage=${outPage - 1},
                                                  returnPage=${returnPage})}">« 上一页</a>
                    </li>
                    <li class="page-item disabled">
                <span class="page-link current-page">
                    <i class="bi bi-send-check me-1"></i>第 <span th:text="${outPage}"></span> 页
                </span>
                    </li>
                    <li class="page-item" th:classappend="${outPage == outTotalPages} ? 'disabled'">
                        <a class="page-link neon-hover"
                           th:href="@{/planeTicket/search(departureCity=${param.departureCity},
                                                  arrivalCity=${param.arrivalCity},
                                                  departureDate=${param.departureDate},
                                                  roundTrip=${param.roundTrip},
                                                  outPage=${outPage + 1},
                                                  returnPage=${returnPage})}">下一页 »</a>
                    </li>
                </ul>
            </nav>
        </div>


    </div>

    <!-- 返程航班列表 -->
    <div class="glass-box" th:if="${returnFlights != null}">
        <h4 class="mb-3">返程航班</h4>
        <table class="table table-hover align-middle">
            <thead>
            <tr>
                <th>航班号</th>
                <th>出发城市</th>
                <th>到达城市</th>
                <th>起飞时间</th>
                <th>到达时间</th>
                <th>票价</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="flight : ${returnFlights}">
                <td th:text="${flight.flightNo}"></td>
                <td th:text="${flight.depCity.city}"></td>
                <td th:text="${flight.arrCity.city}"></td>
                <td>
                    <span th:text="${#dates.format(flight.depDate, 'yyyy-MM-dd')}"></span>
                    &nbsp;<span th:text="${flight.depTime}"></span>
                </td>
                <td>
                    <span th:text="${#dates.format(flight.arrDate, 'yyyy-MM-dd')}"></span>
                    &nbsp;<span th:text="${flight.arrTime}"></span>
                </td>
                <td><span class="price-tag" th:text="'￥' + ${flight.basePrice}"></span></td>
                <td>
                    <a href="#" class="btn btn-sm btn-primary"
                       th:href="@{/order/success(flightId=${flight.id}, flightNo=${flight.flightNo}, basePrice=${flight.basePrice},departureCity=${departureCity},arrivalCity=${arrivalCity}, depPort=${flight.depCity.name}, arrPort=${flight.arrCity.name},retrunDate=${flight.arrTime},roundTrip=${param.roundTrip},,departureDate=${departureDate},returnDate=${returnDate},roundTrip=${roundTrip})}">
                        购买
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="d-flex justify-content-center mt-4" th:if="${returnTotalPages > 1}">
            <nav class="pagination-glass">
                <ul class="pagination pagination-sm justify-content-center">
                <li class="page-item" th:classappend="${returnPage == 1} ? 'disabled'">
                        <a class="page-link neon-hover"
                           th:href="@{/planeTicket/search(departureCity=${param.departureCity},
                                                  arrivalCity=${param.arrivalCity},
                                                  departureDate=${param.departureDate},
                                                  roundTrip=${param.roundTrip},
                                                  outPage=${outPage},
                                                  returnPage=${returnPage - 1})}">« 上一页</a>
                    </li>
                    <li class="page-item disabled">
                <span class="page-link current-page">
                    <i class="bi bi-arrow-return-left me-1"></i>第 <span th:text="${returnPage}"></span> 页
                </span>
                    </li>
                    <li class="page-item" th:classappend="${returnPage == returnTotalPages} ? 'disabled'">
                        <a class="page-link neon-hover"
                           th:href="@{/planeTicket/search(departureCity=${param.departureCity},
                                                  arrivalCity=${param.arrivalCity},
                                                  departureDate=${param.departureDate},
                                                  roundTrip=${param.roundTrip},
                                                  outPage=${outPage},
                                                  returnPage=${returnPage + 1})}">下一页 »</a>
                    </li>
                </ul>
            </nav>
        </div>


    </div>
</div>

<script>
    // 自动补全功能
    function setupAutoComplete(inputId, listId) {
        const input = document.getElementById(inputId);
        const list = document.getElementById(listId);

        input.addEventListener("input", () => {
            const keyword = input.value.trim();
            if (keyword.length < 1) {
                list.innerHTML = "";
                return;
            }
            fetch(`/airport/query?keyword=${encodeURIComponent(keyword)}`)
                .then(res => res.json())
                .then(data => {
                    list.innerHTML = "";
                    data.forEach(item => {
                        const li = document.createElement("li");
                        li.className = "suggest-item";
                        li.textContent = `${item.cityName} (${item.countryName})`;
                        li.onclick = () => {
                            input.value = item.cityName;
                            list.innerHTML = "";
                        };
                        list.appendChild(li);
                    });
                });
        });

        document.addEventListener("click", (e) => {
            if (!input.contains(e.target) && !list.contains(e.target)) {
                list.innerHTML = "";
            }
        });
    }

    setupAutoComplete("departureCity", "departureList");
    setupAutoComplete("arrivalCity", "arrivalList");

    // 控制返程日期显示
    function toggleReturnDate() {
        const checkbox = document.getElementById("isRoundTrip");
        const returnDateDiv = document.getElementById("returnDateDiv");
        returnDateDiv.style.display = checkbox.checked ? "block" : "none";
    }

    // 设置日期控件的初始值和限制
    document.addEventListener("DOMContentLoaded", () => {
        const departureInput = document.getElementById("departureDate");
        const returnInput = document.getElementById("returnDate");
        const today = new Date().toISOString().split("T")[0];
        departureInput.min = today;
       // departureInput.value = today;
        returnInput.min = today;

        departureInput.addEventListener("change", () => {
            if (returnInput.value && returnInput.value < departureInput.value) {
                returnInput.value = departureInput.value;
            }
            returnInput.min = departureInput.value;
        });
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
